import React from 'react';
import styles from "./index.css";
import "./index.css";
import { Button, Input, Layout, Card} from 'element-react';
import { translateSentence } from '../../ai/api';


const { ipcRenderer } = require('electron');

class Translation extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
      inputContent: '',
      outputContent: '',
      submitLoading: false,
    }
  }

  submitQuestion = ()=>{
    this.setState({submitLoading:true, outputContent:'翻译中...'});
    translateSentence(this.state.inputContent, (data)=>{this.setState({submitLoading: false, outputContent:data})})
  }

  handleInputChange = (e) => {
    this.setState({inputContent:e});
  };

  showHistory= () => {
    
  };

  render() {
    return (
      <div className={styles.demoContainer}>
        <Layout.Row gutter="20" style={{'margin-left': '20px', 'margin-top': '80px'}}>
          <Layout.Col span="12">
            <Button onClick={this.submitQuestion} loading={this.state.submitLoading} style={{'margin-bottom': '5px'}}>翻译</Button>
            <Input id='customQuestionInput' type="textarea" value={this.state.inputContent} onChange={this.handleInputChange} placeholder='请输入你需要翻译的内容'/>
          </Layout.Col>
          <Layout.Col span="12">
            <Card id="answerBoard" style={{height:'300px'}}>
                {this.state.outputContent}
            </Card>
          </Layout.Col>
        </Layout.Row>          
      </div>
    );
  }
}

export default Translation;